"use client"

import {useState} from "react"
import {Button} from "@/components/ui/button"
import {Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle} from "@/components/ui/card"
import {Textarea} from "@/components/ui/textarea"
import {Input} from "@/components/ui/input"
import {Label} from "@/components/ui/label"
import {Select, SelectContent, SelectItem, SelectTrigger, SelectValue} from "@/components/ui/select"
import type {TailwindConfig} from "@/lib/types"
import {useToast} from "@/hooks/use-toast"

export function SettingsPanel() {
    const {toast} = useToast()
    const [config, setConfig] = useState<TailwindConfig>({
        primaryColor: "#6366F1",
        secondaryColor: "#10B981",
        fontFamily: "sans",
        borderRadius: "0.5rem",
        customConfig: `module.exports = {
  theme: {
    extend: {
      colors: {
        primary: '#6366F1',
        secondary: '#10B981',
      },
    },
  },
  plugins: [],
}`,
    })

    const handleChange = (field: keyof TailwindConfig, value: string) => {
        setConfig({...config, [field]: value})
    }

    const handleSave = () => {
        // 在实际应用中，这里会保存配置到本地存储或发送到服务器
        toast({
            title: "配置已保存",
            description: "Tailwind CSS 配置已更新",
        })
    }

    return (
        <div className="space-y-6">
            <Card>
                <CardHeader>
                    <CardTitle>Tailwind CSS 配置</CardTitle>
                    <CardDescription>自定义Tailwind CSS配置以满足您的项目需求</CardDescription>
                </CardHeader>
                <CardContent>
                    <div className="space-y-6">
                        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div className="space-y-2">
                                <Label htmlFor="primary-color">主色调</Label>
                                <div className="flex space-x-2">
                                    <Input
                                        id="primary-color"
                                        type="color"
                                        value={config.primaryColor}
                                        onChange={(e) => handleChange("primaryColor", e.target.value)}
                                        className="w-12 h-10 p-1"
                                    />
                                    <Input
                                        value={config.primaryColor}
                                        onChange={(e) => handleChange("primaryColor", e.target.value)}
                                        className="flex-1"
                                    />
                                </div>
                            </div>
                            <div className="space-y-2">
                                <Label htmlFor="secondary-color">次要色调</Label>
                                <div className="flex space-x-2">
                                    <Input
                                        id="secondary-color"
                                        type="color"
                                        value={config.secondaryColor}
                                        onChange={(e) => handleChange("secondaryColor", e.target.value)}
                                        className="w-12 h-10 p-1"
                                    />
                                    <Input
                                        value={config.secondaryColor}
                                        onChange={(e) => handleChange("secondaryColor", e.target.value)}
                                        className="flex-1"
                                    />
                                </div>
                            </div>
                            <div className="space-y-2">
                                <Label htmlFor="font-family">字体</Label>
                                <Select value={config.fontFamily}
                                        onValueChange={(value) => handleChange("fontFamily", value)}>
                                    <SelectTrigger id="font-family">
                                        <SelectValue placeholder="选择字体"/>
                                    </SelectTrigger>
                                    <SelectContent>
                                        <SelectItem value="sans">Sans</SelectItem>
                                        <SelectItem value="serif">Serif</SelectItem>
                                        <SelectItem value="mono">Mono</SelectItem>
                                    </SelectContent>
                                </Select>
                            </div>
                            <div className="space-y-2">
                                <Label htmlFor="border-radius">圆角大小</Label>
                                <Select value={config.borderRadius}
                                        onValueChange={(value) => handleChange("borderRadius", value)}>
                                    <SelectTrigger id="border-radius">
                                        <SelectValue placeholder="选择圆角大小"/>
                                    </SelectTrigger>
                                    <SelectContent>
                                        <SelectItem value="0">无圆角</SelectItem>
                                        <SelectItem value="0.25rem">小圆角 (0.25rem)</SelectItem>
                                        <SelectItem value="0.5rem">中等圆角 (0.5rem)</SelectItem>
                                        <SelectItem value="1rem">大圆角 (1rem)</SelectItem>
                                        <SelectItem value="9999px">全圆角</SelectItem>
                                    </SelectContent>
                                </Select>
                            </div>
                        </div>
                        <div className="space-y-2">
                            <Label htmlFor="tailwind-config">Tailwind 配置</Label>
                            <Textarea
                                id="tailwind-config"
                                value={config.customConfig}
                                onChange={(e) => handleChange("customConfig", e.target.value)}
                                rows={12}
                                className="font-mono text-sm"
                            />
                        </div>
                    </div>
                </CardContent>
                <CardFooter className="flex justify-between">
                    <Button
                        variant="outline"
                        onClick={() =>
                            setConfig({
                                primaryColor: "#6366F1",
                                secondaryColor: "#10B981",
                                fontFamily: "sans",
                                borderRadius: "0.5rem",
                                customConfig: `module.exports = {
  theme: {
    extend: {
      colors: {
        primary: '#6366F1',
        secondary: '#10B981',
      },
    },
  },
  plugins: [],
}`,
                            })
                        }
                    >
                        重置默认值
                    </Button>
                    <Button onClick={handleSave}>保存配置</Button>
                </CardFooter>
            </Card>

            <Card>
                <CardHeader>
                    <CardTitle>预设主题</CardTitle>
                    <CardDescription>选择预设主题快速应用样式</CardDescription>
                </CardHeader>
                <CardContent>
                    <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
                        <Button
                            variant="outline"
                            className="h-20 flex flex-col gap-2 border-2"
                            onClick={() => {
                                setConfig({
                                    ...config,
                                    primaryColor: "#6366F1",
                                    secondaryColor: "#10B981",
                                })
                                toast({
                                    title: "应用主题",
                                    description: "已应用默认主题",
                                })
                            }}
                        >
                            <div className="flex space-x-2">
                                <div className="w-4 h-4 rounded-full bg-indigo-500"></div>
                                <div className="w-4 h-4 rounded-full bg-emerald-500"></div>
                            </div>
                            <span className="text-xs">默认主题</span>
                        </Button>
                        <Button
                            variant="outline"
                            className="h-20 flex flex-col gap-2 border-2"
                            onClick={() => {
                                setConfig({
                                    ...config,
                                    primaryColor: "#3B82F6",
                                    secondaryColor: "#EC4899",
                                })
                                toast({
                                    title: "应用主题",
                                    description: "已应用蓝粉主题",
                                })
                            }}
                        >
                            <div className="flex space-x-2">
                                <div className="w-4 h-4 rounded-full bg-blue-500"></div>
                                <div className="w-4 h-4 rounded-full bg-pink-500"></div>
                            </div>
                            <span className="text-xs">蓝粉主题</span>
                        </Button>
                        <Button
                            variant="outline"
                            className="h-20 flex flex-col gap-2 border-2"
                            onClick={() => {
                                setConfig({
                                    ...config,
                                    primaryColor: "#8B5CF6",
                                    secondaryColor: "#F59E0B",
                                })
                                toast({
                                    title: "应用主题",
                                    description: "已应用紫橙主题",
                                })
                            }}
                        >
                            <div className="flex space-x-2">
                                <div className="w-4 h-4 rounded-full bg-violet-500"></div>
                                <div className="w-4 h-4 rounded-full bg-amber-500"></div>
                            </div>
                            <span className="text-xs">紫橙主题</span>
                        </Button>
                        <Button
                            variant="outline"
                            className="h-20 flex flex-col gap-2 border-2"
                            onClick={() => {
                                setConfig({
                                    ...config,
                                    primaryColor: "#059669",
                                    secondaryColor: "#DC2626",
                                })
                                toast({
                                    title: "应用主题",
                                    description: "已应用绿红主题",
                                })
                            }}
                        >
                            <div className="flex space-x-2">
                                <div className="w-4 h-4 rounded-full bg-emerald-600"></div>
                                <div className="w-4 h-4 rounded-full bg-red-600"></div>
                            </div>
                            <span className="text-xs">绿红主题</span>
                        </Button>
                    </div>
                </CardContent>
            </Card>
        </div>
    )
}
